<template>
  <div class="the-list">
    <div class="panel-search">
      <el-form inline class="demo-form-inline">
        <el-form-item label="活动ID">
          <el-input
            v-model="parmaQuery.activityId"
            placeholder="活动ID"
            clearable
          />
        </el-form-item>
        <el-form-item label="活动名称">
          <el-input
            v-model="parmaQuery.activityName"
            placeholder="活动名称"
            clearable
          />
        </el-form-item>
        <el-form-item label="活动状态">
          <el-select v-model="parmaQuery.activityStatus" placeholder="活动状态" style="width: 240px">
            <el-option label="全部" value="" />
            <el-option label="下架" :value="0" />
            <el-option label="上架" :value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="开奖时间">
          <el-date-picker
            v-model="parmaQuery.openingStartTime"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="datetimerange"
            range-separator="至"
            start-placeholder="请选择时间"
            end-placeholder="请选择时间"
          />
        </el-form-item>
        <el-form-item label="进行状态">
          <el-select v-model="parmaQuery.timeStatus" placeholder="进行状态" style="width: 200px">
            <el-option label="全部" value="" />
            <el-option label="未开始" :value="0" />
            <el-option label="进行中" :value="1" />
            <el-option label="已结束" :value="2" />
          </el-select>
        </el-form-item>
        <el-form-item label="查看排序">
          <el-switch v-model="parmaQuery.sorted" :active-value="1" :inactive-value="0" @change="onSubmit"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button type="primary" @click="onResetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="panel-table">
      <div class="table-head">
        <span>活动列表</span>
        <div>
          <el-button type="primary" @click="gotoAdd" style="margin-right:20px">添加</el-button>
        </div>
      </div>
      <el-table
        :data="activityList"
        stripe
        :header-cell-style="{ backgroundColor: '#ededed', padding: '12px 0' }"
        style="width: 100%"
        border>
        <el-table-column prop="id" label="活动ID" width="120px" />
        <el-table-column prop="activityName" label="活动名称" />
        <el-table-column width="100px" prop="eventsStatus" label="活动状态">
          <template #default="{ row }">
            <el-tag :type="row.activityStatus === 0 ? 'danger' : row.activityStatus === 1 ? 'success' : 'info'">{{ row.activityStatus === 0 ? '下架' : row.activityStatus === 1 ? '上架' : '草稿' }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="endTime" width="180" label="开奖时间" />
        <el-table-column width="100px" prop="eventsStatus" label="进行状态">
          <template #default="{ row }">
            <el-tag :type="['danger','success','info'][row.timeStatus]">{{ ['未开始','进行中','已结束'][row.timeStatus]}}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="ownerNum" label="参与人" width="140" />
        <el-table-column prop="newAddNum" label="新增用户" width="140" />
        <el-table-column width="140px" prop="sortValue" label="排序值">
          <template #default="{ row }">
            <div class="weqwewq">
              <el-input-number
                v-model="row.sortValue"
                controls-position="right"
                :min="0"
                style="width: 100px"
                :max="9999"
                @change="(sortValue) => changeSortValue(sortValue, row.id)"
              ></el-input-number>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="220px">
          <template #default="{ row }">
            <el-button
              size="small"
              type="success"
              plain
              @click="gotoEdit(row)">编辑</el-button> 
            <el-button
              size="small"
              type="primary"
              plain
              @click="gotoCharts(row)">排行榜</el-button>
            <el-popover placement="bottom-start" trigger="click" :width="80" popper-class="self-popper">
              <template #reference>
                <el-button
                  size="small"
                  type="primary"
                  plain>更多</el-button>
              </template>
              <div>
                <el-button
                  size="small"
                  type="primary"
                  plain v-clipboard:copy="'/events/eventsMarket?id=' + row.id" v-clipboard:error="clipboardError" v-clipboard:success="clipboardSuccess">复制链接</el-button>
              </div>
              <div style="margin-top: 10px">
                <el-button
                  type="danger"
                  size="small"
                  plain
                  v-if="row.activityStatus !== 1"
                  @click="sureDelete(row)">删&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;除</el-button>
              </div> 
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-pagination">
        <pagination
          :total="activityTotal"
          v-model:page="parmaQuery.page"
          v-model:limit="parmaQuery.pageSize"
          @pagination="getTableList"
        />
      </div>
    </div>
    <el-dialog
      title="排行榜"
      width="800px"
      :close-on-click-modal="false"
      v-model="rankListData.dialogVisible">
      <el-table
        :data="rankListData.list"
        stripe
        :header-cell-style="{ backgroundColor: '#ededed', padding: '12px 0' }"
        style="width: 100%"
        border>
        <el-table-column prop="rowNum" label="排名" width="90"/>
        <el-table-column prop="customerNickname" label="用户昵称" />
        <el-table-column prop="customerPhone" label="手机号" />
        <el-table-column prop="latestAssistedAt" label="时间" />
        <el-table-column prop="assistanceValue" label="助力值" />
      </el-table>
      <div style="margin-top:20px">
        <pagination
          :total="rankListData.total"
          v-model:page="rankListData.pagination.page"
          v-model:limit="rankListData.pagination.pageSize"
          @pagination="getRankList"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, onMounted } from 'vue'
import { getMarketEventsList, deleteEventsMarket, getEventsMarketRankList, changeEventsInfoSort } from '@/api/eventsinfo.js'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter()
const parmaQuery = ref({
  pageSize: 10,
  page: 1,
  activityName: '',
  activityId: '',
  openingStartTime: [],
  activityStatus: '',
  sorted: '',
  timeStatus: ''
})
const rankListData = ref({
  pagination: {
    pageSize: 10,
    page: 1,
    rankListData: 0
  },
  list: [],
  dialogVisible: false,
  total: 0
})
const activityList = ref([])
const activityTotal = ref(0)
const getTableList = () => {
  const data = {
    ...parmaQuery.value,
    openingStartTime: parmaQuery.value.openingStartTime[0] || '',
    openingEndTime: parmaQuery.value.openingStartTime[1] || '',
    sorted: parmaQuery.value.sorted || ''
  }
  getMarketEventsList(data).then((res) => {
    if (res.code === 0) {
      activityList.value = res.data.items || []
      activityTotal.value = res.data.pagination.total_record
    }
  })
}
const onSubmit = () => {
  getTableList()
}
const onResetQuery = () => {
  parmaQuery.value = {
    pageSize: 10,
    page: 1,
    activityName: '',
    activityId: '',
    openingStartTime: [],
    activityStatus: '',
    sorted: '',
    timeStatus: ''
  }
  getTableList()
}
const gotoAdd = () => {
  router.push('/eventsInfo/editMarket')
}
const gotoEdit = (row) => {
  router.push('/eventsInfo/editMarket/' + row.id)
}
const gotoCharts = (row) => {
  rankListData.value.pagination = {
    pageSize: 10,
    page: 1,
    activityId: row.id
  }
  getRankList()
  rankListData.value.dialogVisible = true
}
const changeSortValue = (sortValue, rowId) => {
  changeEventsInfoSort({
    id: rowId,
    sortValue
  }, 'activityInfo').then(res => {
    if (res.code === 0) {
      ElMessage.success("操作成功")
    }
  })
}
const getRankList = () => {
  const data = {
    ...rankListData.value.pagination
  }
  getEventsMarketRankList(data).then((res) => {
    if (res.code === 0) {
      rankListData.value.list = res.data.items || []
      rankListData.value.total = res.data.pagination.total_record
    }
  })
}
const clipboardSuccess = () => {
  ElMessage.success('复制成功')
}
const clipboardError = () => {
  ElMessage.error('复制失败')
}
const sureDelete = (row) => {
  ElMessageBox.confirm('是否确认删除该活动？', '确认删除', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteItem(row)
  })
  .catch(() => {})
}
const deleteItem = (row) => {
  // 发起删除
  deleteEventsMarket(row.id).then((res) => {
    if (res.code === 0) {
      ElMessage.success('删除成功！')
      getTableList()
    }
  })
}
onMounted(() => {
  getTableList()
})
</script>
<style scoped lang="scss">
@import "@/styles/tablePage.scss";
.el-form-item {
  margin-bottom: 8px;
}
</style>
<style>
.el-popover.el-popper.self-popper{
  min-width: 80px !important;
}
</style>